<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>赛事</title>
    <script src="js/jquery-1.11.2.min.js"></script>
    <link charset="UTF-8" rel="stylesheet" href="css/animate.css">
    <link charset="UTF-8" rel="stylesheet" href="css/swiper.min.css">
    <link charset="UTF-8" rel="stylesheet" href="css/index.css">
</head>
<body>
<section class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide pageFir" trueId="page1">
            <div class="resume">
                <span>负责公司体育赛事转播</span>
            </div>
            <div class="banner_01">

            </div>
            <div class="motion">

            </div>

          </div>

        <div class="swiper-slide pageTwo" trueId="page2">
            <!-- <div class="white_back"> -->
                <!-- <p class="number-events">每年转播体育赛事次数</p> -->

                <div class="" id="container" style="min-width:80%;height:300px;margin-top:150px;">

                </div>

            <!-- </div> -->
        </div>



        <div class="swiper-slide pageThr" trueId="page3">
            <h2 class="live">英雄联盟S7直播</h2>
            <div class="banner_02">
                <!-- <img src="img/banner_02.jpg" alt=""> -->
            </div>
            <div class="kpl-live">
              王者荣耀KPL直播
            </div>
            <div class="banner_03">
              <img src="img/banner_03.jpg" alt="">
            </div>


        </div>



    </div>
</section>
<section class="arrow"></section>
<!-- <section class="audio">
    <audio id="musicAudio" preload="none" loop src="audioFile/All%20My%20Feeling%20Were%20Fake.mp3"></audio>
</section> -->
<script charset="UTF-8" type="text/javascript" src="js/swiper-3.4.2.min.js"></script>
<script charset="UTF-8" type="text/javascript" src="js/fastClick.js"></script>
<script charset="UTF-8" type="text/javascript" src="js/index.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script type="text/javascript">
    FastClick.attach(document.body);

    $(function(){

            var timer = setInterval(function(){
             if($('.pageTwo').offset().top){
                 $('#container').highcharts({
                     chart: {
                         type: 'column',
                         backgroundColor:'rgba(255,255,255,0)'

                     },
                     title: {
                         text: '每年转播体育赛事次数'
                     },
                     // subtitle: {
                     //     text: '数据截止 2017-03，来源: <a href="https://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
                     // },
                     xAxis: {
                         type: 'category',
                         labels: {
                             rotation: -45,
                             style: {
                                 fontSize: '13px',
                                 fontFamily: 'Verdana, sans-serif'
                             }
                         }
                     },
                     yAxis: {
                         min: '0',
                         // splitNumber:'1',
                         gridLineColor:false,
                         tickInterval: 1000,
                         title: {
                             text: '万元'
                         },
                         labels: {
                             // format: '1',
                             formatter: function() {
                                 return this.value / 1000 + 'k'
                             }

                         }
                     },
                     legend: {
                         enabled: false
                     },
                     tooltip: {
                         pointFormat: '人口总量: <b>{point.y:.1f} 百万</b>'
                     },
                     series: [{
                         name: '总人口',
                         colorByPoint:true,
                         data: [
                             ['NFL', 240],
                             ['NHL', 750],
                             ['足球', 1000],
                             ['NBA', 3200],
                             ['其他', 50],

                             // ['拉合尔', 10.05],
                             // ['首尔', 9.99],
                             // ['武汉', 9.78],
                             // ['金沙萨', 9.73],
                             // ['开罗', 9.27],
                             // ['墨西哥', 8.87]
                         ],
                         dataLabels: {
                             enabled: true,
                             rotation: 0,
                             color: '#FFFFFF',
                             align: 'top',
                             format: '{point.y:.1f}', // one decimal
                             y: 10, // 10 pixels down from the top
                             style: {
                                 fontSize: '13px',
                                 fontFamily: 'Verdana, sans-serif'
                             }
                         }
                     }]
                 });


             }
            },1)



    })
</script>

</body>
</html>
